<template>
  <div class="page-content">
    <div class="header">
      <span class="title">{{title}}</span>
    </div>
    <div class="padding-xs" v-if="showSearch">
      <a-input-search :placeholder="searchPlaceholder" @search="onSearch"></a-input-search>
    </div>
    <div class="body">
      <a-spin :spinning="loading">
        <a-directory-tree
        v-bind="$attrs"
        v-if="loadSuccess"
        :showIcon="showIcon" :default-expand-all="defaultExpandAll" @select="onSelect" :treeData="searchData"
                          :replaceFields="replaceFields">
        </a-directory-tree>
      </a-spin>
    </div>
  </div>
</template>

<script>
  export default {
    name: "tableClassify",
    props:{
      title:{
        type: String,
        default: '分类',
        required: false,
      },  //顶部标题
      searchPlaceholder: {
        type: String,
        default: '',
        required: false,
       }, //搜索框提示文字
      loading: {
        type: Boolean,
        default: () => false,
        required: false,
      },  //加载中效果
      replaceFields:{
        type: Object,
        default: () => {return {title:'title', key:'key' }},
        required: false,
      },  //树形数据字段替换
      treeData:{
        type: Array,
        default: () => [],
        required: false,
      }, //树形数据
      searchFieldName:{
        type: String,
        default: 'name',
        required: false,
      },  //搜素字段名
      showSearch:{
        type: Boolean,
        default: () => true,
        required: false,
      },  //是否展示搜索框
      showIcon:{
        type: Boolean,
        default: () => false,
        required: false,
      },  //是否展示图标
      defaultExpandAll:{
        type: Boolean,
        default: () => false,
        required: false,
      },  //是否默认展开全部
    },
    data(){
      return {
        searchData:[],  //搜索结果
        loadSuccess: false
      }
    },
    mounted() {
      this.searchData = JSON.parse(JSON.stringify(this.treeData))
      this.$watch('treeData',()=>{
          this.searchData = JSON.parse(JSON.stringify(this.treeData))
      })
      setTimeout(() => {
        this.loadSuccess = true
      },100)
    },
    methods:{
      //搜索
      onSearch(value){
        this.searchData = this.treeFilter(value, JSON.parse(JSON.stringify(this.treeData)));
      },
      //树形行点击事件
      onSelect(key, options){
        //e为树形数据的key值
        this.$emit('select',key, options)
      },
      //树形数据搜索过滤
      treeFilter(value, arr) {
        if (!arr) {
          return []
        }
        let newarr = [];
        arr.forEach(item => {
          if (item[this.searchFieldName].indexOf(value) > -1) {
            let redata = this.treeFilter(value, item.children);
            let obj = {
              ...item,
              children: redata
            }
            newarr.push(obj);
          } else {
            if (item.children && item.children.length > 0) {
              let redata = this.treeFilter(value, item.children);
              let obj = {
                ...item,
                children: redata
              };
              if (redata && redata.length > 0) {
                newarr.push(obj);
              }
            }
          }
        });
        return newarr;
      },
    }
  }
</script>

<style scoped lang="less">
  .page-content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    .header {
      display: flex;
      width: 100%;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #ebeef5;
      color: #606266;
      padding: 10px;
      height: 50px;
      box-sizing: border-box;

      .title {
        font-size: 16px;
      }
    }

    .body {
      padding: 0 10px 10px;
      overflow: auto;
      flex: 1;
    }
  }
  /deep/ .ant-tree li {
    padding: 0 !important;
  }

  /deep/ .ant-tree li span.ant-tree-switcher,
  /deep/ .ant-tree li .ant-tree-node-content-wrapper,
  /deep/ .ant-tree.ant-tree-directory > li span.ant-tree-node-content-wrapper:hover:before,
  /deep/ .ant-tree.ant-tree-directory > li span.ant-tree-node-content-wrapper:before {
    height: 40px !important;
    line-height: 40px;
    color: #595959 !important;
  }

  /deep/ .ant-tree.ant-tree-directory > li.ant-tree-treenode-selected > span.ant-tree-node-content-wrapper:before {
    height: 40px !important;
    background: #fafafa !important;
  }

  /deep/ .ant-tree.ant-tree-directory > li span.ant-tree-node-content-wrapper.ant-tree-node-selected {
    color: rgba(0, 0, 0, 0.65) !important;
  }

  /deep/ .ant-tree.ant-tree-directory > li span.ant-tree-node-content-wrapper > span {
    line-height: 40px !important;
  }

  /deep/ .ant-table-small > .ant-table-content .ant-table-header {
    background: #fafafa !important;
  }
</style>
